<template>

        <TableList 
        :data="data"
        :total="total"
        :pagination="pagination"
        @onPageChange="onPageChange"
        @handleBulid="handleBulid"
        @handleEdit ="handleEdit"
        >
      </TableList>
       <!-- 引入弹窗组件 -->
      <DialogForm 
      ref="formRef"
      :visible="visible" 
      :data="baseFormData"
      :title="title"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      ></DialogForm>

</template>

<script setup lang="jsx">

import TableList  from './components/TableList.vue'

import { ref, onMounted } from 'vue';
import { getProjectList } from '@/api/serve'
var data = ref([])
var total = ref(0)
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total,
});

//生命周期
onMounted(() => {
  getList()
})

//获取列表数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}
// 编辑信息，回显
const formBaseData = ref({ // 弹窗表单内容
  // 编辑
  const handleEdit = (val)=> {
    // 弹窗的标题
    title.value = "编辑"
    // 获取详情
    getDetails(val.id)
    // 显示弹窗
    visible.value = true
  }
  // 获取详情数据
  const getDetails = asyns (id)==>{
    cosnt res = await getProjectList(id)
    if (res.code === 200) {
      formBaseData.value = res.data
    }
  }
})
</script>